 
html,body{height: 100vh;width: 100vw;overflow: hidden;   user-select: none;
    box-sizing: border-box;} 
@size:10.805vh; 
.mr-10{
  margin-right: .5rem;
}
.left_xzzc {
    font-size: .9rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    width: 24.25rem;
    height: (40/@size);
    background: url("/image/num_xc/left_xz_pay.png") no-repeat;
    background-size: 100% 100%;
}
.container{
    height: 100vh;width: 100vw; 
    // height: 100%;
    background: url("/image/num_xc/containerbg.png") no-repeat top center; 
    background-size: 100% 100%;
    .top {
        // height: 4.4271vw;
        // height: 4.25rem;
        height: (85/@size);
        // position: relative;
        background: url("/image/num_xc/topbg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height:  4.4271vw;
        font-size: 1.6rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #ffffff;
        text-shadow: 0px 0px 12px #009eff;
        .top_right{ 
        
          // width:15rem;
           position: absolute;
           top: 0;
           right:0; 
            font-size: .9rem;
            font-family: SourceHanSansSC;
            font-weight: 400;
            color: #A5B6D3;
            margin-right: .9rem;

            img{
              width: 1.1rem;
              height: (23/@size);
            }
        }
      }

      .box {
        padding: 1.0417vw 1.0417vw  0; 
        display: flex;
        overflow: hidden;
        box-sizing: border-box;
        // padding: 2rem; 
        .box_left {
            overflow: hidden;
            box-sizing: border-box;
            padding: 2rem 1.75rem 0;
            width: 28.9063vw;
        //   height: 88.4vh;
        // height: 49.75rem;
            height: (955/@size);
        
        // height: 995;
        //   height: calc(955/1080vh);
        //   padding-top: 4rem;
          // position: relative;
          background: url("/image/num_xc/left.png") no-repeat;
          background-size: 100% 100%;
          .xzzc_top_e{
              margin-top: 1.5rem;
             height: (323/@size);
            //  width: 100%;
            //  border: 1px solid red;

          }
          .xzzc_bottom_e{
            // margin-top: 3.2rem;
            height: (323/@size);
           //  width: 100%;
            // border: 1px solid red;
            .staijianc_noactive { 
              // box-sizing: border-box; 
              width: 3.55rem;
              height:(71/@size);
              background: url("/image/num_xc/leftshengt.png") no-repeat;
              background-size: 100% 100%;
              font-size: .7rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #a5b6d3;
            }
            .staijianc_active{
              background: url("/image/num_xc/left_shengt1.png") no-repeat;
              background-size: 100% 100%;
            }

            .shuiq{
              height: (275/@size);
             
              // border: 1px solid red;
  
            }
          }

        
           
        }
        .box_center{
           
            // 宽度可以使用rem但是高度的话rem没适配的 
            width:38.0208vw;
            height: (955/@size); 
        
            .box_center_top {
                overflow: hidden;
                box-sizing: border-box;
              width: 36.5rem;
              height: (578/@size); 
              background: url("/image/num_xc/center_top.png") no-repeat;
              background-size: 100% 100%;
              padding: 1rem;
              .box_center_top_box{
                  // width: 34.5rem;
                  height: 16.6rem;
                  // border: 1px solid red;
                  .box_center_top_left {
                    width: 5.45rem;
                    height: (67/@size);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: url("/image/num_xc/bigbsyq.png") no-repeat;
                    background-size: 100% 100%;
                    font-size: .8rem;
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    color: #a5b6d3;
                  }
              }
              .maps{
                width: 23.1771vw;
                height: (314/@size);
                // border: 1px solid red;
              }
            }

            .box_center_center{
              box-sizing: border-box;
                width: 36.5rem;
                 
                height: (281/@size); 
                color: #ffffff; 
                padding: 2.2rem 2.55rem 2.15rem 2.5rem;
                background: url("/image/num_xc/center_bottom.png") no-repeat;
                background-size: 100% 100%;

                 .box_center_center_box{
                    // width: 31.4rem;
                    // height: (214/@size); 
                    .bsyq {
                      width: 4.9rem;  
                      .bsyq_item {
                        width: 4.9rem;
                        height: (36/@size);
                        font-size: .8rem;
                        font-family: Source Han Sans SC;
                        font-weight: 400;
                        color: #ffffff;
                        background: url("/image/num_xc/bsyq.png") no-repeat;
                        background-size: 100% 100%;
                      }
                      .bsyq_item_active {
                        background: url("/image/num_xc/bsyq1.png") no-repeat;
                        background-size: 100% 100%;
                        color: #ffffff;
                      }
                    }
                  }
                  .bsyq_right {
                    overflow: hidden;
                    box-sizing: border-box;
                    width: 5.2rem; 
                    height:(82/@size);
                    background: url("/image/num_xc/quezhenbg.png") no-repeat;
                    background-size: 100% 100%;
                    .bsyq_right_title {
                      font-size: .7rem;
                      font-family: Source Han Sans SC;
                      font-weight: 400;
                      color: #a5b6d3;
                    }
                    .bsyq_right_num {
                      font-size: 1.2rem;
                      font-family: Roboto;
                      font-weight: 500;
                    }
                  }
            }
            
            .box_center_bottom_item { 
                width: 28.45rem;
                height: (46/@size);
                margin-top: (30/@size);
                .bottom_item_bg {
                  // width: 6.9rem; 
                  margin-right: 4.25rem;
                // border: 1px  solid #ffffff;
                  width: 7.45rem;
                  height: (46/@size);
                  line-height: (36/@size);
                  text-align: center;
                  font-size: 0.8rem; 

                //   margin-right: 3.75rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #a5b6d3;
                  background: url("/image/num_xc/center_bottom (1).png") no-repeat;
                  background-size: 100% 100%;
                  color: #a5b6d3;
                }
                .box_center_bottom_item_active {
                  background: url("/image/num_xc/center_bottom1.png") no-repeat;
                  background-size: 100% 100%;
                  color: #ffffff;
                }
              }
        }
        .box_right{
          overflow: hidden;
          box-sizing: border-box;
            // width: 28.9063vw;
            height: (955/@size);
            padding: 2rem 1.75rem 0; 
            background: url("/image/num_xc/left.png") no-repeat;
               background-size: 100% 100%;
            .box_right_tab{
            
             div{
                width: 4.9rem;
                height: (36/@size);
                background: url("/image/num_xc/bsyq.png") no-repeat;
                background-size: 100% 100%;
                font-size: .8rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #a5b6d3;
             }
             
             .bsyq_item_active {
              background: url("/image/num_xc/bsyq1.png") no-repeat;
              background-size: 100% 100%;
              color: #ffffff;
             }
             
            }
            .box_right_top{
                // width: 11rem;
                // border: 1px solid red;
                height: (247/@size);
                .box_right_top_quan{
                  // border: 1px solid red; 
                    width: 10.6rem;
                    height: (212/@size);
                    // background: linear-gradient(0deg, #1890FF 0%, #1AFFE4 100%);
                    // border-radius: 50%;
                }
                .box_right_top_list_active{
                  color: #f9d354;

                  // width: .2rem;
                  // height: (30/@size);
                  border-right:4px solid  #1890FF; 
                   
                  border-radius: 2px;
                }
                .box_right_top_list{
                    width: 11rem;
                    // border: 1px solid red; 
                    height: (247/@size);
                    color: #A5B6D3; 
                    // border-right: 2px solid red;
                    // background: #1890FF;
                    background: #042254;
                    padding-top: 1rem;
                    padding-left: .85rem; 
                    border-radius: .3rem;
                    padding-right: .2rem;
                  
                    .border_id{
                      width: 1rem;
                      height: (20/@size);
                      background: #031439;
                      font-size: .7rem;
                      font-family: Source Han Sans SC;
                      font-weight: 400;
                    
                      border-radius: 50%;
                    }
                    .yjtitle{
                      font-size: .7rem;
                      font-family: Source Han Sans SC;
                      font-weight: 400;
                      // color: #A5B6D3;
                    }
                    .yjicon{
                      width: 16px;
                      height: 18px;
                      background: url("/image/num_xc/yousanj.png") no-repeat;
                      background-size: 100% 100%;
                    }
                    .border_num{
                      font-size: .8rem;
                      font-family: Roboto;
                      font-weight: 500; 
                      margin-right: .55rem;
                    }
                }
              }
            
            .select_box {
              width: 5rem;
              height: (30/@size); 
              background: rgba(3, 20, 57, 0);
              border: 0.1rem solid #00ceff;
              // padding-left: .4rem; 
              
              .select_box_left{
                width:.35rem;
                height: (7/@size);
                margin-right: .4rem;
                margin-left: .4rem;
                background: url('/image/num_xc/right_quan.png') no-repeat;
                background-size: 100% 100%;
              }
              .select_box_title{
                font-size: .7rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #00CEFF
              }
              .select_box_right{
                width: 1.55rem;
                height: (29/@size); 
                margin-left: .95rem;
                background: url('/image/num_xc/right_select.png') no-repeat;
                background-size: 100% 100%;
              }
            } 
            
            // .swiper {
             
            //   // width: 800px;
            //     width: 18.75rem;
            //   border: 1px solid red;
            //   .swiper-wrapper{
            //     width: 18.75rem;
            //       height: .05rem;
            //       top: 50%; 
            //       background: linear-gradient(90deg, rgba(0, 206, 255, 0.1) 0%, #00CEFF 52%, rgba(0, 206, 255, 0.1) 100%);
            //       border-radius: 1px;
            //       border-radius: 0.05rem;
            //       position: relative;
            //     .swiper-slide { 
                
            //     }
            //   }
            // }
          
            .swiper {
              width: 18.75rem !important; 
              overflow: hidden;
              box-sizing: border-box;
               height: (40/@size); 
              // border: 1px solid red;
              margin: 0!important; ;
            }
            .line{
              // width: 18.75rem!important; ;
              width:30rem !important;
              height: .05rem!important;
              top:(14/@size); 
              background: linear-gradient(90deg, rgba(0, 206, 255, 0.1) 0%, #00CEFF 52%, rgba(0, 206, 255, 0.1) 100%);
              border-radius: 1px;
              border-radius: 0.05rem;
              position: relative;
              .swiper-slide{
                width: 1.4rem!important; ;            
                height: (30/@size);
                margin: 0px !important;
                margin-right:1.2rem!important; ;
                .jb_line_item_buj{
                  position: absolute;
                    
                   margin-top: -(12/@size);
                   
                   width: 1.4rem;            
                   height: (30/@size);  
                   .jb_line_item_buj_img{ 
                    //  width: .65rem;
                    width:.9rem; 
                     height: (13/@size); 
                    background: url('/image/num_xc/quan1.png') no-repeat ;
                    background-size: 100% 100%;
                    margin-left: 25%; 
                   }
                   .jb_line_item_buj_img_active{
                    background: url('/image/num_xc/quan4.png') no-repeat ;
                    background-size: 100% 100%;
                   }
                  
                   .jb_line_item_buj_title{
                    user-select: none;
                    //  margin-top: (5/@size);
                    width: 1.45rem;
                    height: (14/@size);
                    font-size: (10/@size);
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    color: #A5B6D3;
                   }
                }
               }
            }
            
            
           

            
          .bsyq_right {
            width: 5.2rem;
            // box-sizing: border-box;
            overflow: hidden;
            height:(70/@size);
            background: url("/image/num_xc/quezhenbg.png") no-repeat;
            background-size: 100% 100%;
            .bsyq_right_title {
              font-size: .7rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #a5b6d3;
            }
            .bsyq_right_num {
              font-size: 1.2rem;
              font-family: Roboto;
              font-weight: 500;
            }
          }
          .ggecharts{
            width: 100%;
            height: (234/@size);
            // border: 1px solid red;
          }
         }
      }
}
